<template>
    <div class="w-100">
        <div
            v-for="(item, index) in articleLists"
            :key="index"
            class="cur-pointer pad-x-10"
            @click="goDetailPage(item)"
        >
            <div class="flex justify-between pad-t-15 w-px-100 scroll-row">
                <div class="w-80">
                    <div class="title font-16">{{ item.title }}</div>

                    <div class="avatar_content flex align-center mar-t-10">
                        <div class="overflow-hidden h-20 w-px-20 flex justify-center align-center radius-50 mar-r-5 ">
                            <img :src="getAuthorAvatar(item)" class="h-20 w-px-20 img-normal"/>
                        </div>
                        <div class="mar-r-15 font-14 color-8a919f">{{ item.nickName ? item.nickName : item.username }}</div>
                    </div>

                    <div class="content font-14 mar-t-15 color-8a919f">{{ item.abstract }}</div>

                    <div class="flex gap-10 color-8a919f mar-y-10 line-h-16">
                        <div class="font-14 img_content">{{ item.nickName ? item.nickName : item.username }}</div>

                        <Lines h="16px" w="1px" bg="#e6e6e6" class="img_content" />

                        <div class="flex align-center">
                            <SvgIcons iconClass="view_icon" class="font-20 mar-r-2" />
                            <div>{{ item.viewerCount }}</div>
                        </div>
                        
                        <div class="flex align-center">
                            <SvgIcons iconClass="like_icon" class="font-18 mar-r-2" />
                            <div>{{ item.likeCount }}</div>
                        </div>
                    </div>
                </div>

                <div v-if="!item.isHideCoverImg" class="img_content w-px-100 h-70 overflow-hidden flex justify-center align-center" >
                    <img :src="getCoverUrl(item.coverUrl)" class="w-100 h100 img-normal" @error="handleError(item)" />
                </div>
            </div>

            <Lines h="1px" w="100%" bg="#f2f3f5" />
        </div>
    </div>
</template>

<script>
    import Lines from '@/components/Lines/index'
    import SvgIcons from '@/components/SvgIcons/index'
    import { getImgUrl } from '@/utils/lib'

    export default {
        props: {
            // 列表主内容
            articleLists: {
                type: Array,
                default: () => []
            }

        },

        computed: {
            // 获取封面图片
            getCoverUrl() {
                return (url) => {
                    return getImgUrl(url)
                }
            },

            // 获取文章列表中作者头像
            getAuthorAvatar() {
                return (item) => {
                    return item.coverUrl ? process.env.VUE_APP_IMG_BASE_API + item.coverUrl : this.defaultAvatar
                }
            },
        },

        components: {
            Lines,
            SvgIcons
        },

        data() {
            return {
                defaultAvatar: require('@/assets/images/defaultAvatar.png')
            }
        },

        mounted() {
        },

        methods: {
            // 跳转详情页
            goDetailPage(row) {
                this.$emit('goDetailPage', row)
            },

            // 图片加载失败
            handleError(item) {
                item.isHideCoverImg = true
            }
        },
    }
</script>

<style lang="scss" scoped>
@media screen and (max-width: 750px) {
    .img_content {
        display: none;
    }    
}

@media screen and (min-width: 750px) {
    .avatar_content {
        display: none;
    }
}

    .cur-pointer:hover {
        background-color: #f7f8fa;
    }

    .cur-pointer { 
        transition-property: background-color, color;
		transition-duration: 0.2s;
    }

    .content {
        text-overflow: ellipsis;
	    overflow: hidden;
        width: 80%;
    }

    .title {
        text-overflow: ellipsis;
	    overflow: hidden;
        width: 90%;
    }
</style>